<template>
  <div class="mindmap-container">
    <VueFlow 
      :nodes="processedNodes"
      :edges="edges"
      :zoom-on-scroll="false"
      :pan-on-scroll="false"    
      :prevent-scrolling="false"  
      :pan-on-drag="false" 
      :min-zoom="1"
      :max-zoom="1"
      
    >
      <template #node-custom="{ data }">
        <div class="main-node">
          <h3>{{ data.label }}</h3>
          <div class="child-nodes">
            <template v-for="(child, index) in data.children" :key="index">
              <!-- 分类单选框 -->
              <div 
                 v-if="child.radio"
                 class="category-radio"
                 @click.stop="handleRadioClick(data.id, child.id)"  
                 :class="{ selected: child.selected }"
                >
              <div class="radio-indicator"></div>
              {{ child.label }}
            </div>

              <!-- 普通子节点 -->
              <div
                v-else
                class="child-node"
                @click.stop="handleChildClick(child.url)"
              >
                {{ child.label }}
                <!-- ...原有链接指示器... -->
                <span class="link-indicator">
                <span class="course-text">课程</span>
                <span class="arrow"> →</span>
              </span>
              </div>
            </template>
          </div>
        </div>
      </template>
    </VueFlow>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { VueFlow } from '@vue-flow/core'
import { mindMapData } from '../../data/mindmap'
import { useRouter } from 'vue-router' // 引入路由实例



const router = useRouter()

// 处理点击事件
const handleChildClick = (url) => {
  if (url?.startsWith('/')) {
    router.push(url)
  } else if (url?.startsWith('http')) {
    window.open(url, '_blank')
  }
}


// 处理节点数据
const processedNodes = computed(() => {
  return mindMapData.nodes.map(node => ({
    id: node.id,
    type: 'custom',
    position: node.position, // 保持固定位置
    data: node,
    draggable: false, // 禁止拖动
  }))
})

// 生成连接线
const edges = computed(() => {
  return mindMapData.nodes
    .slice(0, -1)
    .map((node, index) => ({
      id: `edge-${node.id}-${mindMapData.nodes[index+1].id}`,
      source: node.id,
      target: mindMapData.nodes[index+1].id,
      animated: false, // 可选：设置连接线为动画效果
      style: { 
        stroke: '#1BA3FF', 
        strokeWidth: 2,
        strokeDasharray: '', // 去除虚线样式
      },
      type: 'smoothstep', // 设置为平滑折线
    }))
})

const handleRadioClick = (nodeId, childId) => {
  mindMapData.nodes = mindMapData.nodes.map(node => {
    if (node.id === nodeId) {
      return {
        ...node,
        children: node.children.map(child => ({
          ...child,
          // 同一节点下单选互斥
          selected: child.id === childId ? !child.selected : false
        }))
      }
    }
    return node
  })
}
</script>

<style scoped>
.mindmap-container {

  position: absolute;
  width: 1152px;
  height: 2299px;
  left: calc(50% - 1152px/2 - 54px);
  top: 74px;
  overflow-y: auto;
}

.main-node {
  background: white;
  border: 2px solid #1BA3FF;
  border-radius: 8px;
  padding: 20px;
  width: 370.39px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.child-nodes {
  margin-top: 25px;
}

.child-node {
  padding: 8px;
  margin: 15px 0;
  background: #f5f9ff;
  border-left: 3px solid #1BA3FF;
  border-radius: 4px;
}

/* 连接线箭头样式 */
.vue-flow__edge-path {
  marker-end: url(#arrow-blue);
}
/* 新增链接指示器样式 */
.link-indicator {
  float: right;
  opacity: 1;
  transition: opacity 0.3s;
}

.course-text {
  color: #9900FF; 
}

.arrow {
  color: #1BA3FF;  /* 或者保持箭头颜色为蓝色 */
}
/* 分类单选框样式 */
.category-radio {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #f8f9fe;
  border: 2px solid #1BA3FF;
  border-radius: 6px;
  font-weight: bold;
  color: #1BA3FF;
  margin: 15px 0;
}

.radio-indicator {
  width: 16px;
  height: 16px;
  border: 2px solid #1BA3FF;
  border-radius: 50%;
  margin-right: 12px;
  position: relative;
}

.radio-indicator::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 6px;
  height: 6px;
  background: #1BA3FF;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s;
}

/* 选中状态样式（如果需要交互） */
.category-radio.selected .radio-indicator::after {
  opacity: 1;
}

/* 调整子节点间距 */
.child-node {
  margin: 10px 0 !important;
}
.category-radio.selected {
  background: #e6f3ff;
}


</style>
